<template>
    <div class="box-light">
        <div>
            <div class="card">
                <n-card v-for="(item, index) in card" :key="index" :title="item.title"
                    :style="{ backgroundColor: item.color }" style="width: 24%;">
                    <n-statistic tabular-nums>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <el-icon :size="40">
                                <SvgIcon :name="item.icon" color="#f1f1f1" />
                            </el-icon>
                            <n-number-animation ref="numberAnimationInstRef" show-separator :from="0" :to="100000000"
                                :active="true" />
                        </div>
                    </n-statistic>
                </n-card>
            </div>
            <div>
                <Histogram />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { NScrollbar, NCard, NStatistic, NNumberAnimation } from 'naive-ui'

const card = ref([
    { title: '用户总量', icon: '用户', color: '#99cdf0' },
    { title: '总浏览量', icon: '浏览', color: '#aef0a1' },
    { title: '在线人数', icon: '人群', color: '#eae477' },
    { title: '今日新增', icon: '新增用户', color: '#f58e8e' },
]);
</script>

<style scoped>
.card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
</style>